body {
    margin: 0;
    font-family: "Amarna", sans-serif;
    background-color: #303030;
}

@font-face {
    font-family: Japanola;
    src: url(Japanola.ttf.ttf); /* url of the font */
}

nav {
    width: 100%;
/*    height: 90px;*/
    height: 10vh;
    background-color: #489253; /*#0C4F0C*/
    display: flex;
    font-family: "Freckle Face", system-ui;
}

.nav-button {
    width: 300px;
    height: 70px;
/*    margin-right: 10px;*/
    margin: auto;
    color: white;
    text-align: center;
    font-size: 40px;
    /*text-transform: uppercase;*/
    padding: 10px;
    text-decoration: none;
    transition: all 0.2s linear;
}

.nav-button img {
    height: 70px;
}

.nav-button:first-child {
    width: 70px;
}

.nav-button:hover {
    cursor: pointer;
    background-color: #59A364;
}

article {
    display: flex;
/*    min-height: 770px;*/
    height: 82vh;
}

#main-site-content {
    background: url("rynce%20co%20trzymaja.jpg") no-repeat center;
    background-size: cover;
    transition: all 0.2s linear;
}

#other-site-content {
    background: url("spot%20background.webp") no-repeat center;
    background-size: cover;
    transition: all 0.2s linear;
}

section {
    width: 50%;
    background-color: rgba(43, 62, 69, 0.8);
    text-align: center;
    transition: all 0.2s linear;
    
    /*animation-name: wipe-out-left;*/
    /*animation-duration: 1s;*/
    /*transition-style="out:wipe:left";*/
}

/*section:active {*/
/*    animation-name: wipe-out-left;*/
/*    animation-duration: 2s;*/
/*}*/

@keyframes wipe-out-left {
    from {
        clip-path: inset(0 0 0 0);
    }
     to {
        clip-path: inset(0 100% 0 0);
    }
}

[transition-style="out:wipe:left"] {
    animation: 2s cubic-bezier(.25, 1, .30, 1) wipe-out-left both;
}

section img {
    height: 256px;
    transition: all 0.2s linear;
}

section p {
    cursor: default;
}

#yt-tile {
    color: transparent;
    font-size: 26px;
}

#dc-tile {
    color: transparent;
    font-size: 26px;
}

#yt-logo:hover {
    cursor: pointer;
    filter: invert();
}

#yt-tile:has(#yt-logo:hover) {
    background-color: red;
    color: white;
}

#dc-logo:hover {
    cursor: pointer;
    filter: invert();
}

#dc-tile:has(#dc-logo:hover) {
    background-color: #424549;
    color: white;
}

/*===============*/
/*==== O NAS ====*/
/*===============*/

#char-left-panel {
    color: white;
    width: 85%;
    margin: auto;
/*
    margin-top: 10%;
    margin-bottom: 10%;
*/
/*    align-items: center;*/
}

.char-menu-label {
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
}

.char-menu-label:first-child {
    margin-top: 40px;
    margin-bottom: 60px;
}

.char-menu-tile {
    margin-left: auto;
    margin-right: auto;
}

.char-menu-tile ul {
    text-align: justify;
}

.select-arrow {
    color: white;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.2s linear;
}

.select-arrow:hover {
    cursor: pointer;
    opacity: 0.7;
}

.select-character {
    font-size: 26px;
}

#char-nickname {
    font-size: 26px;
    margin-left: auto;
    margin-right: auto;
}

#character-description {
/*    font-family: "Georgia";*/
}

#social-media-character {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; 
}

.social-button {
/*
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
*/
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 30px;
    text-align: center;
    border-radius: 100%;
    transition: all 0.2s linear;
}

.social-button img {
    width: 36px;
    height: 36px;
    filter: invert();
    padding: 12px;
    display: block;
}

.social-button:hover {
    opacity: 0.7;
    cursor: pointer;
}

.yt-circle {
    background-color: red;
}

.black-circle {
    background-color: black;
}

.bsky-circle {
    background-color: #0085FF;
}

.ig-circle {
    background-image: linear-gradient(#5b51d8, #c13584, #f77737, #ffdc80);
}

.tt-circle {
    background-color: black;
}

.tt-circle img {
    filter: invert() drop-shadow(-3px -2px 0px #00f2ea) drop-shadow(2px 3px 0px #ff0050);
}
.twitch-circle { background-color: #9146FF; }

.kick-circle {
    background-color: black;
}

.kick-circle img {
    filter: none;
}

.sc-circle {
    background-color: #FF5500;
}

.spot-circle {
    background-color: #1ED760;
}

.tip-circle {
    background-color: #0000EB;
}

.tip-circle img {
    filter: none;
    width: 40px;
    height: 40px;
}

.kofi-circle {
    background-color: #76A7F2;
}

.kofi-circle img {
    filter: none;
    width: 40px;
    height: 40px;
}

#skin-panel {
/*    background: url("characters/Wojtuch566/20260414_132653.jpg") no-repeat center;*/
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

.character-skin-image {
    height: 566px;
    display: none;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
}

.selected-image {
    display: block;
/*
    animation-name: fade;
    animation-duration: 2s;
*/
}

/*
@keyframes fade {
    from { opacity: .5;}
    to { opacity: 1; }
}
*/

.select-skin {
    font-size: 32px;
    background-color: gold;
    padding: 10px;
    border: 6px solid black;
    box-shadow: 10px 10px 4px black;
    color: black;
}

#skin-selector-t {
    font-family: "Comic Sans MS";
    text-transform: uppercase;
}

.character-skin-title {
    font-size: 32px;
    background-color: gold;
    padding: 10px;
    border: 6px solid black;
    box-shadow: 10px 10px 4px black;
    display: none;
}

.selected-title {
    display: block;
}

/*===============*/
/*===============*/
/*===============*/

/*===============*/
/*==== PLANY ====*/
/*===============*/

#schedule-one {
    color: white;
}

.sched-label {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    /*height: 150px;*/
    /*margin-bottom: 30px;*/
    /*background-color: rgba(59, 59, 63, 0.7);*/
}

.sched-up-label {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.sched-selector {
    margin-left: auto;
    margin-right: auto;
    transition: all 0.2s linear;
}

.sched-selector:hover {
    opacity: 0.7;
    cursor: pointer;
}

.sched-selector img {
    width: 150px;
    height: 150px;
    border-radius: 100%;
}

/*===============*/
/*===============*/
/*===============*/

/*================*/
/*=== ARCHIWUM ===*/
/*================*/

#archive-one {
    color: white;
    overflow-Y: auto;
}

.archive-guy {
    width: 85%;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}

.archive-list {
    display: flex;
    overflow-X: auto;
}

.archive-list img {
    height: 128px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: block;
    transition: all 0.2s linear;
}

.archive-list img:hover {
    cursor: pointer;
    opacity: 0.7;
}

#archive-two {
    color: white;
    text-align: justify;
}

#archive-two h1 {
    font-size: 50px;
}

#archive-cancel {
    filter: invert();
    height: 40px;
    display: none;
    margin-top: 20px;
    margin-left: 90%;
    transition: all 0.2s linear;
}

#archive-cancel:hover {
    cursor: pointer;
    opacity: 0.7;
}

#archive-cat-container {
    margin-top: 30px;
    overflow-Y: auto;
    width: 95%;
    height: 65%;
}

.archive-cat-item {
    display: flex;
    /*margin-bottom: 10px;*/
    text-decoration: none;
    color: white;
    transition: all 0.2s linear;
    padding: 10px;
    border-radius: 10px;
}

.archive-cat-item:hover {
    background-color: rgba(59, 59, 63, 0.7);
}

.archive-cat-item img {
    height: 60px;
}

.archive-item-title {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 2%;
}

/*================*/
/*================*/
/*================*/

/*================*/
/* INTERAKTYWNIE =*/
/*================*/

.feature-sec {
    color: white;
}

#feature-grid {
    display: grid;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: auto auto auto auto;
}

.feature-button {
    margin-left: auto;
    margin-right: auto;
    transition: all 0.2s linear;
}

.feature-button:hover {
    opacity: 0.7;
    cursor: pointer;
}

.feature-button img {
    width: 150px;
    height: 150px;
    border-radius: 100%;
}

#feature-container {
    width: 100%;
}

#bingo-grid {
    display: inline-grid;
    grid-template-columns: auto auto auto auto;
    width: 448px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    text-align: center;
    font-size: 10px;
    background-color: rgba(88, 45, 64, 0.5);
    color: black;
}

.bingo-tile {
    width: 110px;
    height: 110px;
    border: 1px solid black;
    transition: all 0.2s linear;
}

.bingo-tile:hover {
    background-color: rgba(80, 40, 60, 0.5);
    color: white;
    cursor: pointer;
}

.bingo-string {
    margin-top: 45%;
}

.bingo-string-long {
    margin-top: 40%;
}

.bingo-string-triple {
    margin-top: 33%;
}

/*================*/
/*================*/
/*================*/

footer {
    width: 100%;
    height: 8vh;
    background-color: #222;
    color: white;
    display: flex;
}


footer h6 {
    margin: auto;
/*    z-index: 3;*/
}